<extend name="Public/base" />
<block name="style">
<link rel="stylesheet" type="text/css"
	href="__STATIC__/css/compiled/wizard.css">

<link rel="stylesheet" type="text/css"
	href="__STATIC__/css/libs/dropzone.css">
</block>

<block name="body">
<div class="row">
	<div class="col-lg-12">
		<div class="main-box clearfix" style="min-height: 1180px;">
			<header class="main-box-header clearfix">
				<h2>添加用户</h2>
			</header>
			<div class="main-box-body clearfix">
				<div id="addUserWizard" class="wizard">
					<div class="wizard-inner">
						<ul class="steps">
							<li data-target="#step1" class="active"><span
								class="badge badge-primary">1</span>添加资料<span class="chevron"></span></li>
							<li data-target="#step2"><span class="badge">2</span>上传头像<span
								class="chevron"></span></li>
						</ul>
						<div class="actions">
							<button type="button" class="btn btn-default btn-mini btn-prev">
								<i class="icon-arrow-left"></i>上一步
							</button>
							<button type="button"
								class="btn btn-success btn-mini btn-next ajax-post"
								target-form="form-horizontal" data-last="完成">下一步</button>


						</div>
					</div>
					<div class="step-content">
						<div class="step-pane active" id="step1">

							<h4></h4>
							<form class="form-horizontal" action="{:U()}" method="post">

								<input name="avatar_id" id="user_avatar_hidden" type="hidden"
									value="0" />
						 
								<div class="form-group">
									<label for="NickName" class="col-lg-1 control-label">用户昵称</label>
									<div class="col-lg-11">
										<input type="text" name="nickname" class="form-control"
											id="NickName" placeholder="用户昵称(可以是中文)">
									</div>
								</div>

								 


								<div class="form-group">
									<label for="UserGroup" class="col-lg-1 control-label">用户分组</label>
									<div class="col-lg-11">
										<select name="group_id" class="form-control">
											<volist name="groups" id="group">
											<option value='{$group.id}'>{$group.group_name}</option>
											</volist>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="UserWeight" class="col-lg-1 control-label">用户权重</label>
									<div class="col-lg-11">
										<input type="number" class="form-control" name="user_weight"
											id="userWeight"   placeholder="用户权重"
										>
									</div>
								</div>

								<div class="form-group">
									<label for="Verify" class="col-lg-1 control-label">是否认证</label>
									<div class="col-lg-11">
										<div class="pull-left">
											<div class="onoffswitch">
												<input type="checkbox" name="user_verify" value="0"
													class="onoffswitch-checkbox" id="user_verify"> <label
													class="onoffswitch-label" for="user_verify">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</label>
											</div>
										</div>
									</div>
								</div>

								<div class="form-group">
									<label for=" VerifyContent" class="col-lg-1 control-label">认证资料</label>
									<div class="col-lg-11">
										<input type="text" class="form-control" name="verify_content"
											id="VerifyContent" disabled placeholder="认证资料">
									</div>
								</div>
							</form>
						</div>
						<div class="step-pane" id="step2">

							<h4 style="text-align: center;">
								上传头像120*120 <span id="upload_tips"></span>
							</h4>
							<div class="form-group">


								<input type="file" name="avatar" id="user_avatar_file"
									style="display: none;">

								<div id="dropzone">
									<div id="avatar-upload" class="dropzone dz-clickable">
										<div id="user_avatar_tip" class="dz-default dz-message">

										</div>
										<img id="user_avatar_img" width="120" height="120"
											class="avatar-center" src="__STATIC__/images/uploading.png"
											style="display: none;">
									</div>

								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</div>
</div>


</block>

<block name="script"> <script src="__STATIC__/js/wizard.js"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.fileupload.js"></script>
<script type="text/javascript">
	//选择图片文件之后立即上传表单
	$('#user_avatar_file').change(function() {
		$('#upload_tips').html('-上传中...');
		$("#user_avatar_img").show();
		$("#user_avatar_tip").hide();
	});

	$("#user_avatar_file").fileupload(
			{
				url : "{:U('User/File/uploadAvatar')}",
				done : function(e, result) {
					var json = result.result;
					if (json.status) {
						$('#upload_tips').html('-上传成功');
						$("#user_avatar_img").attr("src", json.url);
						$('#user_avatar_hidden').val(json.id);

					} else {
						$('#upload_tips').html('-上传失败');
						$('#upload_tips').html('');
						$('#user_avatar_hidden').val('0');
						$("#user_avatar_img").hide();
						$("#user_avatar_img").attr("src",
								'__STATIC__/images/uploading.png');
						$("#user_avatar_tip").show();
						$('#user_avatar_file').val('');
					}
				}
			});

	$(function() {
		$('#addUserWizard').wizard();
	});

	$("#user_verify").change(function() {
		if ($('#user_verify').prop('checked')) {
			$('#user_verify').val(1);
			$('#VerifyContent').attr('disabled', false);
		} else {
			$('#user_verify').val(0);
			$('#VerifyContent').attr('disabled', true);
		}

	});
	$("#user_avatar_tip").click(function() {
		$("#user_avatar_file").click();
	});

	$("#user_avatar_img").click(function() {
		$('#upload_tips').html('');
		$('#user_avatar_hidden').val('0');
		$("#user_avatar_img").hide();
		$("#user_avatar_img").attr("src", '__STATIC__/images/uploading.png');
		$("#user_avatar_tip").show();
	});
</script> </block>
